<template>
  <a-layout v-scroll="show">
    <a-layout-content style="background-color: #F2F2E6; ">
      <br>
      <div style="text-align: center">
        <img src="../../public/images/idea-storm.png"
             style="width: 300px; height: 300px;  margin-top: 80px"
             alt=""/>

        <p style="font-family: '华文楷体',sans-serif; margin-top: 50px; font-size: 35px; color: #89B8CA; font-weight: bolder">
          生活中是否有些灵光乍现的时刻？记录下来并Make  it  Come  True吧！
        </p>
      </div>
      <!--横向步骤条-->
      <div style="margin-top: 40px">
        <v-card elevation="7" class="rounded-r-xl" style="padding: 10px; font-family: '华文楷体',sans-serif; font-weight: bolder; margin: 0 20px;" color="au_white">
          <a-steps direction="horizontal" :style="stepStyle" type="navigation" v-model:current="current" @change="changeStep">
            <a-step title="描述创意" description="描述一下创意的类型和内容。" status="finish" />
            <template #icon>
              <a-icon type="bulb" />
            </template>
            <a-step title="实现创意" description="用图片、视频的形式给出创意的详细设计。" status="finish" />
            <a-step title="发布创意" description="选择发布到社区或是暂时存入创意仓库。" status="finish" />
          </a-steps>
        </v-card>
      </div>
      <v-row style="padding-bottom: 0; margin-bottom: 5vh">
        <!--纵向步骤条-->
        <v-col cols="3" style="padding-bottom: 0">
          <div style="margin-left: 20px; font-family: '华文楷体',sans-serif; font-weight: bold; position: sticky; top: 90px" v-if="showVertical">
            <a-tooltip placement="bottomLeft" v-if="creativity_info.statement !== '待审核' && creativity_info.statement !== '已发布'">
              <template slot="title">
                <span style="font-family: 宋体">随时保存，以免创意数据丢失</span>
              </template>
              <v-btn
                @click="save"
                color="main_1"
                style="font-family: '华文楷体',sans-serif; font-weight: bold; margin-bottom: 20px; width: 7vw"
                tile
              >
                暂时保存
                <v-icon>mdi-content-save-check-outline</v-icon>
              </v-btn>
            </a-tooltip>
            <a-popconfirm placement="right" ok-text="新建创意" cancel-text="暂不新建" @confirm="confirm">
              <template slot="title">
                <p class="song-font-bold">新建创意前请确保当前页面创意信息已保存！</p>
              </template>
              <v-btn
                @click=""
                color="#FFFAF4"
                v-if="sessionState"
                style="font-family: '华文楷体',sans-serif; font-weight: bold; margin-bottom: 20px; margin-left: 15px; width: 7vw"
                tile
              >
                新建创意
                <v-icon>mdi-star-plus-outline</v-icon>
              </v-btn>
            </a-popconfirm>
            <a-steps v-model:current="current" direction="vertical" @change="changeStep">
              <a-step title="描述创意" description="创意的类型和内容" style="font-weight: bolder;" />
              <template #icon>
                <a-icon type="double-right" />
              </template>

              <a-step title="实现创意" description="创意的详细设计" />
              <a-step title="发布创意" description="发布到社区or存入创意仓库" />
            </a-steps>
          </div>
        </v-col>
        <!--          表单-->
        <v-col cols="8" style="padding-bottom: 0">
          <!--            创意名字-->
          <div style="margin-top: 80px">
            <span class="step-title">告诉我们创意的名字：</span>
            <v-text-field
              :counter="10"
              maxlength="10"
              v-model="creativity_info.name"
              style="font-family: '华文楷体',sans-serif; font-weight: bold"
              :rules="textRules"></v-text-field>
          </div>
          <!--            创意详情-->
          <div style="margin-top: 80px">
            <span class="step-title">用一段话描述一下你的创意：</span>
            <v-textarea
              v-model="creativity_info.detail"
              color="primary"
              style="font-family: '华文楷体',sans-serif; font-weight: bold"
              :counter="1000"
              maxlength="1000"
            >
              <template v-slot:label>
                <div style="font-family: '华文楷体',sans-serif; font-weight: bold">
                  简单阐述：你的想法是如何产生的，以及该创意的功能、制造思路和用途等内容。（不超过1000字）
                </div>
              </template>
            </v-textarea>
          </div>
          <!--            创意类别-->
          <div style="margin-top: 80px">
            <span class="step-title">选择这项创意的类别：</span>
            <v-divider style="margin-top: 10px"></v-divider>
            <a-list :data-source="items"
                    :grid="{ gutter: 8, column: 4 }"
                    style="width: 99%; ">
              <a-list-item slot="renderItem" slot-scope="item, index" style="margin-top: 3vh">
                <v-card tile width="200" height="200" elevation="8" color="au_white" @click="selectType(index)">
                  <v-card-text
                    :style="{color: item.color}"
                    style="font-family: '华文楷体',sans-serif; font-weight: bold; text-align: center; vertical-align: center; position: relative; top: 50%; transform: translateY(-50%);">
                    {{item.title}}
                  </v-card-text>

                </v-card>
              </a-list-item>
            </a-list>
          </div>
          <!--            创意特征-->
          <div style="margin-top: 80px">
            <v-row>
              <span class="step-title">添加这项创意的至少三个令人眼前一亮的特征：</span>
            </v-row>
            <v-row>
              <v-col cols="12" md="3">
                <v-text-field
                  style="width: 200px; font-family: '华文楷体',sans-serif; font-weight: bold"
                  v-model="fea"
                  :counter="5"
                  label="特征"
                ></v-text-field>
              </v-col>

              <v-col cols="12" md="3" style="padding: 0; margin-top: 30px">
                <v-btn
                  elevation="2"
                  icon
                  :disabled="fea.split(' ').join('').length === 0 || fea.length > 5"
                  text
                  @click="addFeature"
                >
                  <v-icon style="color: #89B8CA">
                    mdi-plus
                  </v-icon>
                </v-btn>
              </v-col>
            </v-row>
            <a-list :data-source="features"
                    :locale="{emptyText: '请添加创意特征'}"
                    :grid="{ gutter: 10, column: 6 }"
                    style="width: 99%; ">
              <a-list-item slot="renderItem" slot-scope="item, index" style="margin-top:3vh">
                <v-card width="150" height="150" elevation="8" color="#c1cbd7" rounded="circle">
                  <v-card-text
                    style="font-family: '华文楷体',sans-serif; font-weight: bold; text-align: center; vertical-align: center; position: relative; top: 50%; transform: translateY(-50%);">
                    {{item}}
                  </v-card-text>

                  <div style="font-family: '华文楷体',sans-serif; font-weight: bold; text-align: center; margin-top: 30px">
                    <v-btn icon @click="removeFeature(index)">
                      <v-icon style="color: #89B8CA">mdi-minus</v-icon>
                    </v-btn>
                  </div>
                </v-card>
              </a-list-item>
            </a-list>
          </div>
          <!--            草图上传-->
          <v-container style="margin-top: 80px;">
            <span class="step-title">你是否对你的创意有比较成熟的想法？点击这里上传创意草图吧</span>
            <v-divider style="margin-top: 10px; margin-bottom: 20px"></v-divider>
            <v-row>
              <v-col cols="6">
                <div>
                  <el-upload
                    class="upload-demo"
                    :file-list="fileList"
                    :class="{hide:hideSketchUpload}"
                    accept='.jpg, .png,.jpeg'
                    :action="uploadUrl"
                    list-type="picture-card"
                    :on-success="handleSketchSuccess"
                    :on-preview="handlePictureCardPreview"
                    :on-change="handleChange"
                    :before-upload="beforeUpload"
                    :on-remove="handleSketchRemove">
                    <i class="el-icon-upload">
                      <div class="el-upload__tip" slot="tip" style="font-family: '华文楷体',sans-serif; font-weight: bold"> 支持.jpg,.png格式图片上传，不超过10MB</div>
                    </i>

                  </el-upload>

                  <v-dialog v-model="previewVisible" width="600">
                    <img alt="草图" style="width: 100%" :src="previewImage" />
                  </v-dialog>
                </div>
              </v-col>
              <v-col cols="6">
                <a-textarea placeholder="请你对草图的绘制思路进行必要的描述和解释。（不超过500字）"
                            v-model="creativity_info.sketchInfo"
                            v-show="fileList.length!==0"
                            :max-length="500"
                            style="background-color: #FFFAF4; font-weight: bold; font-family: '华文楷体',sans-serif; margin-top: 30px"
                            :auto-size="{ minRows: 8, maxRows: 10 }">
                </a-textarea>
              </v-col>
            </v-row>

          </v-container>
          <!--            渲染图上传-->
          <v-container style="margin-top: 100px">
            <span class="step-title">你的创意是否已经完成了详尽的设计？点击这里上传创意的渲染图吧</span>
            <v-divider style="margin-top: 10px; margin-bottom: 20px"></v-divider>
            <v-row>
              <v-col cols="6">
                <div>
                  <el-upload
                    class="upload-demo"
                    :file-list="picFileList"
                    :class="{hide:hidePictureUpload}"
                    accept='.jpg, .png,.jpeg'
                    :action= "uploadUrl"
                    list-type="picture-card"
                    :on-success="handlePictureSuccess"
                    :on-preview="handlePicPreview"
                    :on-change="handlePicChange"
                    :before-upload="beforeUpload"
                    :on-remove="handlePicRemove">
                    <i class="el-icon-upload">
                      <div class="el-upload__tip" slot="tip" style="font-family: '华文楷体',sans-serif; font-weight: bold"> 支持.jpg,.png格式图片上传，不超10MB</div>
                    </i>
                  </el-upload>
                  <v-dialog v-model="picPreviewVisible" width="600">
                    <img alt="草图" style="width: 100%" :src="picPreviewImage" />
                  </v-dialog>
                </div>
              </v-col>
              <v-col cols="6">
                <a-textarea placeholder="请你对渲染图的绘制思路进行必要的描述和解释。（不超过500字）"
                            v-show="picFileList.length!==0"
                            v-model="creativity_info.picInfo"
                            :max-length="500"
                            :counter="500"
                            style="background-color: #FFFAF4; font-weight: bold; font-family: '华文楷体',sans-serif; margin-top: 40px"
                            :auto-size="{ minRows: 8, maxRows: 10 }">
                </a-textarea>

              </v-col>
            </v-row>

          </v-container>
          <!--            视频上传-->
          <div style="margin-top: 100px">
            <span class="step-title">最后上传一段视频介绍介绍你的创意吧！</span>
            <v-divider style="margin-top: 10px; margin-bottom: 20px"></v-divider>
            <v-row>
              <v-col cols="7">
                <a-textarea
                  placeholder="请输入视频链接，如https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4"
                  v-model="videoSrc"
                  :max-length="2100"
                  style="background-color: #FFFAF4; font-weight: bold; font-family: '华文楷体',sans-serif; margin-bottom: 10px; width: 600px; font-size: 15px"
                  :auto-size="{ minRows: 2, maxRows: 10 }">
                </a-textarea>
                <p style="font-family: '微软雅黑'; font-size: 12px">建议选择.mp4格式视频外链上传，你可以前往<a href="https://caniuse.com/#search=video%20format" target="_blank" rel="noopener noreferrer">caniuse-video-format<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 阅读更多关于当前浏览器对于视频格式的支持情况。</p>
              </v-col>
              <v-col cols="2">
                <v-btn @click="addVideo"
                       color="main_1"
                       style="font-family: '华文楷体',sans-serif; font-weight: bold"
                       x-large
                       text
                       :disabled="videoSrc === '' || videoSrc === undefined"
                       elevation="1"
                       rounded>
                  上传
                  <v-icon>mdi-upload</v-icon>
                </v-btn>
              </v-col>
            </v-row>

            <div class="player-container" v-if="creativity_info.video !== ''" style="margin-top: 20px">
              <v-row>
                <v-col cols="12" sm="8">
                  <vue-core-video-player :src="creativity_info.video" @error="errorHandle"></vue-core-video-player>
                </v-col>
                <v-col cols="12" sm="4">
                  <a-textarea
                    placeholder="你可以在这里对视频内容进行必要的解释。（不超过500字）"
                    :max-length="500"
                    v-model="creativity_info.videoInfo"
                    style="background-color: #FFFAF4; font-weight: bold; font-family: '华文楷体',sans-serif; margin-bottom: 50px;"
                    :auto-size="{ minRows: 10, maxRows: 15 }"></a-textarea>
                </v-col>
              </v-row>


            </div>

          </div>
          <!--            发布创意-->
          <div style="margin-top: 80px">
            <span class="step-title">形成创意</span>
            <v-divider style="margin-top: 10px; margin-bottom: 20px"></v-divider>
            <v-row style="margin-bottom: 60px">
              <v-col cols="12" sm="6" v-if="creativity_info.statement !== '待审核' && creativity_info.statement !== '已发布'">
                <v-card
                  elevation="4"
                  rounded
                  style="padding: 10px; background-color: #f8ebd8"
                >

                  <v-card-text>
                    <span style="font-family: '华文楷体',sans-serif; font-size: 15px; font-weight: bold; margin-left: 10px;">如果你的创意还不成熟或者这项创意在将来有重要用途（如申请专利等），你可以把它设为私密，存入创意仓库。</span>
                  </v-card-text>

                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn @click="save_final"
                           color="main_1"
                           style="font-family: '华文楷体',sans-serif; font-weight: bold;"
                           text
                           rounded>
                      存入创意仓库
                      <v-icon>mdi-content-save-check-outline</v-icon>
                    </v-btn>
                  </v-card-actions>


                </v-card>
              </v-col>
              <v-col cols="12" sm="6">
                <v-card
                  elevation="4"
                  rounded
                  style="padding: 10px; background-color: #e0e5df"
                >
                  <v-card-text>
                    <span style="font-family: '华文楷体',sans-serif; font-size: 15px; font-weight: bold; margin-left: 10px;">你可以将创意发布到创意社区，分享你的Idea，同时听听其它创新工程师的看法和建议。</span>
                  </v-card-text>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn @click="submit"
                           color="main_1"
                           style="font-family: '华文楷体',sans-serif; font-weight: bold;"
                           text
                           rounded>
                      分享创意
                      <v-icon>mdi-share-variant</v-icon>
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-col>
            </v-row>
          </div>
        </v-col>

      </v-row>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import request from "../utils/request"

    export default {
      name: "Idea_Submission",
      data: () => ({
        uploadUrl: '',
        textRules: [
          v => !!v || '请输入创意名称',
          v => (v && v.length <= 10) || '创意名称不超过10个字符哦',
        ],
        stepStyle: {
          marginBottom: '10px',
          boxShadow: '0px -1px 0 0 #e8e8e8 inset',
        },
        current: 0,
        direction: 'horizontal',
        showVertical: false,
        creativity_info: {video: ''},
        fea: '',
        showVideo: false,
        videoSrc: '',
        features: [],
        sessionState: false,
        items: [
          {title: '人类生活需要（农、轻、医)', color: '#2C2E2D'},
          {title: '作业、运输', color: '#2C2E2D'},
          {title: '化学、冶金', color: '#2C2E2D'},
          {title: '纺织、造纸', color: '#2C2E2D'},
          {title: '固定建筑物', color: '#2C2E2D'},
          {title: '机械工程、照明、加热、武器、爆破', color: '#2C2E2D'},
          {title: '物理', color: '#2C2E2D'},
          {title: '电学', color: '#2C2E2D'}
        ],
        previewVisible: false,
        picPreviewVisible: false,
        limitCount: 1,
        hideSketchUpload: false,
        hidePictureUpload: false,
        previewImage: '',
        picPreviewImage: '',
        fileList: [],
        picFileList: [],
      }),
      created() {
        this.uploadUrl = '/api/file/upload'
        if (sessionStorage.getItem('creative')){
          this.sessionState = true
          this.loadCreativity(this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('creative'))))
        }

      },

      computed:{

      },
      methods:{
        parseJSONCapture(str) {
          try {return JSON.parse(str);}
          catch (e) {
            this.confirm()
          }
        },
        decodeCapture(str) {
          try {return decodeURIComponent(window.atob(str))}
          catch (e) {
            this.confirm()
          }
        },
        confirm(){
          if (sessionStorage.getItem('creative'))
            sessionStorage.removeItem('creative')
          this.$router.go(0)
        },

        warnTip(msg){
          this.$message.warn({ content: msg,
            icon: () =>
              this.$createElement("a-icon", {
                props: {
                  type: "frown"
                }
              }),
            top: '100px',
            duration: 1
          });
        },
        successTip(msg){
          this.$message.success({ content: msg,
            icon: () =>
              this.$createElement("a-icon", {
                props: {
                  type: "smile"
                }
              }),
            top: '100px',
            duration: 1
          });
        },
        loadCreativity(id){
          request.get('/creative/isMine', {params: { id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('creative')))}}).then(res1 => {
            if(res1.code === '200'){
              request.get('/creative/' + id).then(res => {
                if(res.code === '200'){
                  this.creativity_info = res.data
                  this.features = res.data.feature.split(' ')
                  for (let i = 0; i < this.items.length; i++){
                    if (this.items[i].title === res.data.type)
                      this.items[i].color = "#89B8CA"
                  }
                  if (res.data.sketch !== '{}'){
                    this.hideSketchUpload = true
                    this.fileList.push(JSON.parse(res.data.sketch))
                  }
                  if (res.data.picture !== '{}'){
                    this.hidePictureUpload = true
                    this.picFileList.push(JSON.parse(res.data.picture))
                  }
                }
                else {
                  this.confirm()
                }

              })
            }
            else this.confirm()
          })
        },
        show(){
          this.showVertical = window.pageYOffset > 590;
          if (window.pageYOffset < 1900)
            this.current = 0
          else if (window.pageYOffset >= 1900 && window.pageYOffset < 2300)
            this.current = 1
          else if (window.pageYOffset >= 2300)
            this.current = 2
        },
        selectType(index){
          for (let i = 0; i < this.items.length; i++){
            this.items[i].color = index === i ? "#89B8CA" : "#2C2E2D"
          }
          this.creativity_info.type = this.items[index].title
        },
        async addFeature(){
          if(this.features.length === 5){
            this.warnTip('最多添加5个特征哦')
            return
          }
          if (this.features.indexOf(this.fea) !== -1){
            this.warnTip('该特征已添加')
            return
          }
          await this.features.push(this.fea)
          this.fea = ''
        },
        removeFeature(index){
          this.features.splice(index, 1)
        },

        // 草图上传成功 回调
        handleSketchSuccess(res, file, filelist) {
          file.url = res
        },
        // 草图删除 回调
        handleSketchRemove(file, fileList) {
          this.hideSketchUpload = fileList.length >= this.limitCount;
          this.fileList = fileList
        },
        // 草图预览
        handlePictureCardPreview(file) {
          this.previewImage = file.response;
          this.previewVisible = true;
        },
        // 草图文件列表change回调
        handleChange(file, fileList) {
          this.hideSketchUpload = fileList.length >= this.limitCount;
          this.fileList = fileList
        },

        dataURItoBlob(dataURI, type) { // base64转blob
          let binary = atob(dataURI.split(',')[1]);
          let array = [];
          for(let i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
          }
          return new Blob([new Uint8Array(array)], {type: type});
        },

        beforeUpload(file) { // 文件上传前钩子
          const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
          const isLt10M = file.size / 1024 / 1024 < 10
          if (!isJpgOrPng) {
            this.$message.error('文件格式错误！')
          } else if(!isLt10M) {
            this.$message.error('文件过大！')
          } else {
            const _this = this
            return new Promise(resolve => {
              const reader = new FileReader()
              const image = new Image()
              image.onload = (imageEvent) => {
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                const originWidth = image.width
                const originHeight = image.height
                // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
                let maxWidth = 800, maxHeight = 800
                // 目标尺寸
                let targetWidth = originWidth, targetHeight = originHeight
                // 图片尺寸超过800x800的限制
                if (originWidth > maxWidth || originHeight > maxHeight) {
                  if (originWidth / originHeight > maxWidth / maxHeight) {
                    // 更宽，按照宽度限定尺寸
                    targetWidth = maxWidth;
                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                  } else {
                    targetHeight = maxHeight;
                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                  }
                }
                canvas.width = targetWidth
                canvas.height = targetHeight
                context.clearRect(0, 0, targetWidth, targetHeight)
                context.drawImage(image, 0, 0, targetWidth, targetHeight)
                const dataUrl = canvas.toDataURL('image/jpeg', 0.8)
                const blobData = _this.dataURItoBlob(dataUrl, 'image/jpeg')
                resolve(blobData)
              }
              reader.onload = (e => { image.src = e.target.result; })
              reader.readAsDataURL(file)
            })
          }
          return isJpgOrPng && isLt10M
        },


        // 渲染图上传成功 回调
        handlePictureSuccess(res, file, filelist) {
          file.url = res
        },
        // 渲染图预览
        handlePicPreview(file) {
          this.picPreviewImage = file.response;
          this.picPreviewVisible = true;
        },
        // 渲染图文件列表change回调
        handlePicChange(file, fileList) {
          this.hidePictureUpload = fileList.length >= this.limitCount;
          this.picFileList = fileList
        },
        // 渲染图删除 回调
        handlePicRemove(file, fileList) {
          this.hidePictureUpload = fileList.length >= this.limitCount;
          this.picFileList = fileList
        },

        // 显示视频
        addVideo(){
           this.creativity_info.video = this.videoSrc
        },
        // 视频寄了回调
        errorHandle (e) {
          // handle error
          this.videoSrc = ''
          this.creativity_info.video = ''
          this.$message.warn({ content: '视频解析失败，请检查链接。',
            icon: () =>
              this.$createElement("a-icon", {
                props: {
                  type: "frown"
                }
              }),
            top: '100px',
            duration: 1
          });
        },
        // 跳跳跳
        changeStep(current){
          if (current === 0){
            this.$vuetify.goTo(0, {
              duration: 1000,
              offset: -600,
              easing: 'easeInOutCubic',
            })
          }
          if (current === 1){
            this.$vuetify.goTo(0, {
              duration: 1000,
              offset: -1900,
              easing: 'easeInOutCubic',
            })
          }
          if (current === 2){
            this.$vuetify.goTo(0, {
              duration: 1000,
              offset: -3900,
              easing: 'easeInOutCubic',
            })
          }
        },

        saveCheck(){

          if (this.creativity_info.sketchInfo){
            if (this.creativity_info.sketchInfo.split('\n').join('').split(' ').join('').length === 0){
              this.creativity_info.sketchInfo = ''
            }
          }
          if (this.creativity_info.picInfo){
            if (this.creativity_info.picInfo.split('\n').join('').split(' ').join('').length === 0){
              this.creativity_info.picInfo = ''
            }
          }
          if (this.creativity_info.picInfo){
            if (this.creativity_info.picInfo.split('\n').join('').split(' ').join('').length === 0){
              this.creativity_info.picInfo = ''
            }
          }
          if (this.creativity_info.videoInfo){
            if (this.creativity_info.videoInfo.split('\n').join('').split(' ').join('').length === 0){
              this.creativity_info.videoInfo = ''
            }
          }
          this.creativity_info.feature = this.features.join(' ')
          if (this.fileList.length > 0)
            this.creativity_info.sketch = JSON.stringify(this.fileList[0])
          else
            this.creativity_info.sketch = JSON.stringify({})

          if (this.picFileList.length > 0)
            this.creativity_info.picture = JSON.stringify(this.picFileList[0])
          else
            this.creativity_info.picture = JSON.stringify({})
        },

        // 保存创意
        // 最终保存
        save_final(){
          if (sessionStorage.getItem('creative')){
            this.save_c()
          }
          else{
            if (this.creativity_info.name === undefined || this.creativity_info.name.length > 10 || this.creativity_info.name.split('\n').join('').split(' ').join('').length === 0){
              this.warnTip('请输入正确的创意名称后再保存')
              return
            }
            if (this.creativity_info.detail === undefined || this.creativity_info.detail.split('\n').join('').split(' ').join('').length === 0){
              this.warnTip('请输入创意描述后再保存')
              return
            }
            if (this.creativity_info.type === '' || this.creativity_info.type === undefined){
              this.warnTip('请选择创意分类后再保存')
              return
            }
            if (this.features.length < 3){
              this.warnTip('请添加至少三个创意特征后再保存')
              return
            }
            this.saveCheck()
            this.creativity_info.statement = '未发布'
            this.creativity_info.userId = -1
            request.post('/creative/insertCreative', this.creativity_info).then(res => {
              if (res.code === '200'){
                this.successTip('创意保存成功')
                sessionStorage.removeItem('creative')
                this.$router.push('/personal/creativity')
              }
            })
          }


        },
        // 暂时保存
        save(){
          if (sessionStorage.getItem('creative')){
            this.save_b()
          }
          else{
            this.save_a()
          }
        },
          // 初次保存
        save_a(){
          if (this.creativity_info.name === undefined || this.creativity_info.name.length > 10 || this.creativity_info.name.split('\n').join('').split(' ').join('').length === 0){
            this.warnTip('请输入正确的创意名称后再保存')
            return
          }
          if (this.creativity_info.detail === undefined || this.creativity_info.detail.split('\n').join('').split(' ').join('').length === 0){
            this.warnTip('请输入创意描述后再保存')
            return
          }
          if (this.creativity_info.type === '' || this.creativity_info.type === undefined){
            this.warnTip('请选择创意分类后再保存')
            return
          }
          if (this.features.length < 3){
            this.warnTip('请添加至少三个创意特征后再保存')
            return
          }
          this.saveCheck()
          this.creativity_info.statement = '未发布'
          this.creativity_info.userId = -1
          request.post('/creative/insertCreative', this.creativity_info).then(res => {
            if (res.code === '200'){
              this.successTip('创意保存成功')
              sessionStorage.setItem('creative',window.btoa(window.encodeURIComponent(JSON.stringify(res.data.id))))
              this.sessionState = true
            }
          })
        },
          // 迭代保存
        save_b(){
          if (this.creativity_info.name === undefined || this.creativity_info.name.length > 10 || this.creativity_info.name.split('\n').join('').split(' ').join('').length === 0){
            this.warnTip('请输入正确的创意名称后再保存')
            return
          }
          if (this.creativity_info.detail === undefined || this.creativity_info.detail.split('\n').join('').split(' ').join('').length === 0){
            this.warnTip('请输入创意描述后再保存')
            return
          }
          if (this.creativity_info.type === '' || this.creativity_info.type === undefined){
            this.warnTip('请选择创意分类后再保存')
            return
          }
          if (this.features.length < 3){
            this.warnTip('请添加至少三个创意特征后再保存')
            return
          }
          this.saveCheck()
          request.get('/creative/isMine', {params: { id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('creative')))}}).then(res1 => {
            if(res1.code === '200'){
              this.creativity_info.statement = '未发布'
              this.creativity_info.id = this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('creative')))
              this.creativity_info.userId = -1
              request.post('/creative/saveMine', this.creativity_info).then(res => {
                if (res.code === '200'){
                  this.successTip('创意保存成功')
                }
                else{
                  this.sendWarnMessage('创意状态异常，保存失败')
                  this.confirm()
                }
              })
            }
            else this.confirm()
          })

        },
          // 迭代保存+跳转
        save_c(){
          if (this.creativity_info.name === undefined || this.creativity_info.name.length > 10 || this.creativity_info.name.split('\n').join('').split(' ').join('').length === 0){
            this.warnTip('请输入正确的创意名称后再保存')
            return
          }
          if (this.creativity_info.detail === undefined || this.creativity_info.detail.split('\n').join('').split(' ').join('').length === 0){
            this.warnTip('请输入创意描述后再保存')
            return
          }
          if (this.creativity_info.type === '' || this.creativity_info.type === undefined){
            this.warnTip('请选择创意分类后再保存')
            return
          }
          if (this.features.length < 3){
            this.warnTip('请添加至少三个创意特征后再保存')
            return
          }
          this.saveCheck()
          request.get('/creative/isMine', {params: { id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('creative')))}}).then(res1 => {
            if(res1.code === '200'){
              this.creativity_info.statement = '未发布'
              this.creativity_info.id = this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('creative')))
              this.creativity_info.userId = -1
              request.post('/creative/saveMine', this.creativity_info).then(res => {
                if (res.code === '200'){
                  this.successTip('创意保存成功')
                  sessionStorage.removeItem('creative')
                  this.$router.push('/personal/creativity')
                }
                else{
                  this.sendWarnMessage('创意状态异常，保存失败')
                  this.confirm()
                }
              })
            }
            else this.confirm()
          })
        },

        // 发布创意
        submit(){
          if (sessionStorage.getItem('creative')){
            request.get('/creative/isMine', {params: { id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('creative')))}}).then(res1 => {
              if(res1.code === '200'){
                this.creativity_info.id = this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('creative')))
                this.submit_a()
              }
              else this.confirm()
            })
          }
          else{
            this.submit_b()
          }
        },
        // 发布
        submit_a(){
          if (this.creativity_info.name === undefined || this.creativity_info.name.length > 10 || this.creativity_info.name.split('\n').join('').split(' ').join('').length === 0){
            this.warnTip('请输入正确的创意名称后再保存')
            return
          }
          if (this.creativity_info.detail === undefined || this.creativity_info.detail.split('\n').join('').split(' ').join('').length === 0){
            this.warnTip('请输入创意描述后再保存')
            return
          }
          if (this.creativity_info.type === '' || this.creativity_info.type === undefined){
            this.warnTip('请选择创意分类后再保存')
            return
          }
          if (this.features.length < 3){
            this.warnTip('请添加至少三个创意特征后再保存')
            return
          }
          this.saveCheck()
          this.creativity_info.statement = '待审核'
          this.creativity_info.view = 0
          this.creativity_info.userId = -1
          request.post('/creative/saveMine', this.creativity_info).then(res => {
            if (res.code === '200'){
              this.successTip('创意发布成功')
              sessionStorage.removeItem('creative')
              this.$router.push('/personal/creativity')

            }
            else{
              this.sendWarnMessage('创意状态异常，保存失败')
              this.confirm()
            }
          })
        },
        submit_b(){
          if (this.creativity_info.name === undefined || this.creativity_info.name.length > 10 || this.creativity_info.name.split('\n').join('').split(' ').join('').length === 0){
            this.warnTip('请输入正确的创意名称后再保存')
            return
          }
          if (this.creativity_info.detail === undefined || this.creativity_info.detail.split('\n').join('').split(' ').join('').length === 0){
            this.warnTip('请输入创意描述后再保存')
            return
          }
          if (this.creativity_info.type === '' || this.creativity_info.type === undefined){
            this.warnTip('请选择创意分类后再保存')
            return
          }
          if (this.features.length < 3){
            this.warnTip('请添加至少三个创意特征后再保存')
            return
          }
          this.saveCheck()
          this.creativity_info.statement = '待审核'
          this.creativity_info.userId = -1
          request.post('/creative/insertCreative', this.creativity_info).then(res => {
            if (res.code === '200'){
              this.successTip('创意发布成功，即将前往创意仓库')
              this.$router.push('/personal/creativity')
            }
          })
        },
      }
    }
</script>

<style>
  .step-title{
    font-family: '华文楷体',sans-serif;
    font-weight: bolder;
    font-size: 18px;
    color: #89B8CA;
  }
  .el-upload-list--picture-card .el-upload-list__item{
    width: auto !important;
    height: auto !important;
    max-width: 28vw !important;
    max-height: 40vh !important;
  }
  .el-upload--picture-card{
    width: 400px !important;
    height: 200px !important;
  }
  .hide .el-upload--picture-card {
    display: none;
  }
</style>
